<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>jQuery-多项选择</title>
</head>
<body>
<h3>请问您喜欢吃什么东西？</h3>

<div>
  <input type="checkbox" name="switch"/>全选/全不选
</div>

<div>
  <input type="checkbox" name="item" value="Apple"/>苹果
  <input type="checkbox" name="item" value="Saute Spicy Chicken"/>大盘鸡
  <input type="checkbox" name="item" value="Chicken with egg and scallion"/>肉蛋葱鸡
  <input type="checkbox" name="item" value="Peach"/>桃子
  <input type="checkbox" name="item" value="Tea egg"/>茶叶蛋
</div>

<div>
  <button type="button" id="selectAll">全选</button>
  <button type="button" id="selectNone">全不选</button>
  <button type="button" id="selectInverse">反选</button>
  <button type="button" id="submit">提交</button>
</div>

<!-- jQuery -->
<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script>
  // 全选
  $("#selectAll").click(() => {
    $(":checkbox").prop("checked", true);
  });

  // 全不选
  $("#selectNone").click(() => {
    $(":checkbox").prop("checked", false);
  });

  // 反选
  $("#selectInverse").click(() => {
    // checked 属性反转
    $(":checkbox[name='item']").each(function () {
      this.checked = !this.checked;
    });

    // 保证所有选框选择后，总开关多选框显示正常状态
    $(":checkbox[name='switch']").prop("checked", $(":checkbox[name='item']").length === $(
        ":checkbox[name='item']:checked").length);
  });

  // 总开关多选框
  $(":checkbox[name='switch']").click(function () {
    $(":checkbox[name='item']").prop("checked", this.checked);

  });

  // 当所有选框选择后，总开关多选框也默认勾选（反之则反）
  $(":checkbox[name='item']").click(function () {
    $(":checkbox[name='switch']").prop("checked", $(":checkbox[name='item']").length === $(
        ":checkbox[name='item']:checked").length);
  });

  // 无关代码，方便演示
  $("#submit").click(() => {
    let str = "您选择了: ";
    $(":checkbox[name='item']").each(function () {
      if (this.checked) {
        str += this.value + ",";
      }
    });
    alert(str.substring(0, str.length - 1));
  });
</script>
</body>
</html>
